require('./Rollup.styl');
const classNames = require('classnames');
import { Boxs } from 'saltui';
import AngleUp from 'salt-icon/lib/AngleUp';
const { HBox, Box, VBox } = Boxs;
class Rollup extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isUp: false,
            title: props.title,
            msg: '',
            selectId: null,
            repairStatus:''
        };
        this.clickHead = this.clickHead.bind(this);
        this.handleClickListItem = this.handleClickListItem.bind(this);
    }
    clickHead() {
        this.setState({ isUp: !this.state.isUp });
    }
    handleClickListItem(e) {
        let t = this;
        let id = e.target.dataset["id"];
        let msg = e.target.textContent;
        if (id != this.state.selectId) {
            this.repairCode = t.props.listdata[id].id;
            this.repairStatus = t.props.listdata[id].status;
            this.setState({ selectId: id, isUp: false, msg })
        }
        if(this.props.cb){
            this.props.cb&&this.props.cb(msg,this.repairStatus)
        }
    }
    render() {
        let t = this;
        return (
            <div className="rollup">
                <HBox vAlign="center" onClick={this.clickHead} >
                    <Box flex={1} className="rollup-title t-ML16">
                        {t.state.title}
                    </Box>
                    <Box flex={1} className="rollup-title t-ML16">
                        {t.state.msg}
                    </Box>
                    <Box flex={1} className='t-FAR t-MR10'>
                        <AngleUp className={classNames({ "spinning": !this.state.isUp })} fill="#999" />
                    </Box>
                </HBox>
                {this.state.isUp && t.props.listdata instanceof Array && t.props.listdata.map((item, index) => {
                    return (
                        <div key={index} data-id={index} className={classNames('t-LH40 t-PL10 list-item', { "select": this.state.selectId == index })} onClick={this.handleClickListItem}>
                            {item.msg}
                        </div>)
                })}
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentWillReceiveProps(nextProps) {

    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

module.exports = Rollup;
